<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <cpn2></cpn2>
        <cpn3></cpn3>
        <cpn4></cpn4>
        <cpn5></cpn5>
        <cpn6></cpn6>
        <cpn7></cpn7>
    </div>

    <!--通过script标签写 组件模板 -->
<script type="text/x-template" id="cpn5">
    <div>
        <h2>我是标题5</h2>
        <p>我是内容5</p>
    </div>
</script>

<!-- 通过template标签写组件模板 -->
<template id="cpn6">
    <div>
        <h2>我是标题6</h2>
        <p>我是内容6</p>
    </div>
</template>

<template id="cpn7">
    <div>
        <h1>{{title}}</h1>
        <h2>我是标题7</h2>
        <p>我是内容7</p>
    </div>
</template>


    <script src="../vue.js"></script>
    <script>


        const cpnC1=Vue.extend({
            template:`
                <div>
                    <h2>我是标题1</h2>
                    <p>我是内容1</p>
                </div>
            `
        })

        // 父组件
        const cpnC2=Vue.extend({
            template:`
                <div>
                    <h2>我是标题2</h2>
                    <p>我是内容2</p>
                    <cpn1></cpn1>
                </div>
            `,
            components:{
                cpn1:cpnC1 //子组件
            }
        })

        //全局组件语法糖
        Vue.component('cpn3',{
            template:`
                <div>
                    <h2>我是标题3</h2>
                    <p>我是内容3</p>
                </div>
            `
        })

        // 调用组件模板id
        Vue.component('cpn5',{
            template:'#cpn5'
        })

        Vue.component('cpn6',{
            template:'#cpn6'
        })

        // 组件内部data数据
        Vue.component('cpn7',{
            template:'#cpn7',
            data(){
                return{
                    title:'组件内部title数据'
                }
            }
        })

        const app=new Vue({
            el:"#app",
            data:{

            },
            methods: {
                
            },
            components:{
                cpn2:cpnC2,

                //局部组件语法糖
                cpn4:{
                    template:`
                <div>
                    <h2>我是标题4</h2>
                    <p>我是内容4</p>
                </div>
            `
                }
            }
        })
    </script>
</body>
</html>